<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('集成数字化管理系统')" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集成看板</title>

    <style>
        .button-container {
            display: flex;
            justify-content: flex-end; /* 靠右对齐 */
            align-items: center;
            gap: 10px; /* 按钮间距 */
            padding: 5px; /* 容器内边距 */
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .button-container button {
            padding: 5px 15px; /* 按钮内边距 */
            font-size: 14px; /* 字体大小 */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            transition: background-color 0.3s;
        }

        .button-container button:hover {
            background-color: #0056b3;
        }
    </style>

    <style>
        .popup {
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 8px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            line-height: 1.5; /* 行距 */
            white-space: normal; /* 允许内容自动换行 */
            display: none;
            z-index: 1000;
        }
    </style>
    <style>
        /* 设置整个页面的左右边距 */
       body {
           margin-left: 0px;  /* 页面左边距 */
           margin-right: 0px; /* 页面右边距 */
       }

       /* 取消 .row 的外边距，确保与屏幕的边距对齐 */
       .row.no-gutters {
           margin-left: 0 !important;
           margin-right: 0 !important;
           margin-top: 1px !important;
           margin-bottom: 1px !important;
           display: flex;
           align-items: stretch; /* 保证左右部分的高度一致 */
       }

       /* 设置列的左右内边距 */
       .row.no-gutters > [class*="col-"] {
           padding-left: 1px !important;  /* 左内边距 */
           padding-right: 1px !important; /* 右内边距 */
           margin-top: 1px !important;    /* 设置顶部外边距 */
           margin-bottom: 1px !important; /* 设置底部外边距 */
       }

       /* 设置 .ibox 的间距和内边距 */
       .ibox {
           margin-top: 0px !important;   /* 修改顶部外边距，减少顶部间距 */
           margin-bottom: 1px !important;
           padding: 0 !important; /* 去除默认内边距 */
           flex-grow: 1; /* 使 .ibox 在容器中高度平衡 */
           height: 100%; /* 确保 .ibox 高度占满 */
       }

       /* 设置 .ibox-content 的内边距 */
       .ibox-content {
           padding: 1px !important; /* 设置适当的内边距 */
       }

       /* 设置右侧部分容器，确保它与左侧平衡 */
       .right-side-box {
           display: flex;
           flex-direction: column;
           flex: 1;  /* 右侧部分与左侧平衡 */
           height: 100%; /* 确保右侧部分的高度和左侧一致 */
       }

       /* 设置右侧合并单元格的间距 */
       .right-side-box .ibox {
           margin: 1px !important;   /* 外边距 */
           padding: 0 !important;     /* 内边距 */
           flex-grow: 1;  /* 保证右侧单元格的高度和左侧一样 */
           height: 100%; /* 强制设置右侧单元格的高度 */
       }

       /* 设置 .ibox-content 内部的内边距 */
       .right-side-box .ibox-content {
           padding: 1px !important;  /* 添加适当的内边距 */
       }

       /* 设置 .col-sm-6 和 .col-sm-4 的内边距和外边距 */
       .col-sm-6, .col-sm-4 {
           padding-left: 2px !important;
           padding-right: 2px !important;
           margin-top: 2px !important;
           margin-bottom: 2px !important;
       }

       /* 调整顶部的间距，减小每个ibox间的空隙 */
       .custom-ibox {
           margin-top: 0px !important;  /* 调整上方间距 */
       }
    </style>
    <style>
        .custom-col {
            background-color: #e40744; /* 设置背景色 */
        }
    </style>
    <style>
        .echarts {
            background-color: #f0f0f0; /* 设置背景色为浅灰色 */
        }
    </style>


</head>
<body class="gray-bg">
<div class="row border-bottom white-bg dashboard-header" style="background-color: #8bc8e3;">
    <div class="col-sm-12 text-center">
        <!-- 点击标题跳转到后台管理页面 -->
        <a href="/index_topnav" style="text-decoration: none; color: inherit;">
            <p style="font-size: 28px; font-weight: bold; cursor: pointer; color: white;">
                集成数字化管理系统
            </p>
        </a>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight" style="background-color: #8bc8e3;margin-top: 0;">
    <div class="button-container"  style="margin-left: 2px; margin-right: 1px;">
        <h3 style="margin-right: 15px; margin-bottom: 0; color: red;">流水线运行时长</h3>
        <div class="button-group">
            <button class="btn" onclick="location.href='/echarts_week'">周</button>
            <button class="btn" onclick="location.href='/echarts_month'">月</button>
            <button class="btn" onclick="location.href='/echarts_quarter'">季度</button>
            <button class="btn" onclick="location.href='/echarts_year'">年</button>
            <button class="btn" onclick="location.href='/data_statistical_details'">统计报表</button>
        </div>
    </div>

    <div class="row no-gutters" style="display: flex;">
        <!-- 左侧部分，使用 flex 布局分成三列 -->
        <div style="flex: 0 0 50%; display: flex; flex-direction: column;">
            <!-- C2版本释放成功率 -->
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '每个版本CICD_C2_SOC流水线运行时长')"
                            onmouseout="hidePopup()">CICD_C2_SOC流水线运行时长</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="runningtime_week" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div style="flex: 0 0 50%; display: flex; flex-direction: column;">
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '每个版本CICD_SOC_SDK流水线运行时长')"
                            onmouseout="hidePopup()">CICD_SOC_SDK流水线运行时长</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="runningtime_month" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row no-gutters" style="display: flex;">
        <!-- 左侧部分，使用 flex 布局分成三列 -->
        <div style="flex: 0 0 50%; display: flex; flex-direction: column;">
            <!-- C2版本释放成功率 -->
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '每个版本CICD_C2_MCU流水线运行时长')"
                            onmouseout="hidePopup()">CICD_C2_MCU流水线运行时长</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="runningtime_quarter" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div style="flex: 0 0 50%; display: flex; flex-direction: column;">
            <div class="col-sm-12" style="padding: 2px; margin-top: -2px;">
                <div class="ibox float-e-margins chart-box">
                    <div class="ibox-title">
                        <h5 style="color: blue;"
                            onmouseover="showPopup(event, '每个版本CICD_SOC_APP流水线运行时长')"
                            onmouseout="hidePopup()">CICD_SOC_APP流水线运行时长</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="runningtime_year" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 公用弹窗 -->
    <div id="popup" class="popup"></div>
    <script>
        function showPopup(event, message) {
            const popup = document.getElementById('popup');
            popup.innerHTML = message; // 使用 innerHTML 支持 HTML 标签解析
            popup.style.display = 'block';  // 显示弹窗
            popup.style.left = event.pageX + 10 + 'px';  // 设置弹窗的X坐标
            popup.style.top = event.pageY - 70 + 'px';   // 设置弹窗的Y坐标
        }

        function hidePopup() {
            const popup = document.getElementById('popup');
            popup.style.display = 'none';  // 隐藏弹窗
        }
    </script>
    <div class="signup-footer">
        <div class="pull-center" style="text-align: center;">
            Copyright © 2024-2025 Changan SDA智驾工作组集成开发团队 All Rights Reserved.<br>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
         // 初始化 ECharts
        var chart_soc = echarts.init(document.getElementById('runningtime_week'));

        // 获取数据并渲染图表
        function fetchAndRenderSocChart() {
                $.ajax({
                url: '/api/C2CICDRunningTime/byAll', // 替换为你的后端接口地址
                method: 'GET',
                success: function (response) {
                    if (response.status === 200 && response.data) {
                        renderSocChart(response.data);
                    } else {
                        console.error('No data available or error response:', response);
                    }
                },
                error: function (err) {
                    console.error('AJAX Error:', err);
                }
            });
        }

        // 渲染图表
        function renderSocChart(data) {
        var xAxisData = Object.keys(data); // 横坐标（所有的 versionNo）
        var runTimeData = Array(xAxisData.length).fill(0); // 存储 CICD_C2_SOC 的 runTime 数据

        // 遍历数据结构，只保留 nodeName 为 "CICD_C2_SOC" 的数据
        xAxisData.forEach((versionNo, index) => {
            data[versionNo].forEach(node => {
                if (node.nodeName === "CICD_C2_SOC") {
                    runTimeData[index] = parseFloat(node.runTime); // 只存储 CICD_C2_SOC 的运行时间
                }
            });
        });

        // 配置图表
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            legend: {
                data: ["CICD_C2_SOC"],
                top: 'top',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: xAxisData,
                name: 'C2版本号',
                axisLabel: { interval: 0, rotate: 30 }
            },
            yAxis: {
                type: 'value',
                name: '运行时间（分钟）'
            },
            series: [
                {
                    name: "CICD_C2_SOC",
                    type: 'bar',
                    data: runTimeData,
                    label: {
                        show: true, // 显示数值
                        position: 'top', // 数值显示在柱子顶部
                        fontSize: 12,
                        color: '#333' // 可调整颜色
                    }
                }
            ]
        };

        // 使用配置项生成图表
        chart_soc.setOption(option);
        }

        // 加载图表数据并每隔5秒刷新一次
        setInterval(fetchAndRenderSocChart, 5000);

        // 初始化页面加载时也渲染一次
        fetchAndRenderSocChart();




        // 初始化 ECharts
        var chart_sdk = echarts.init(document.getElementById('runningtime_month'));

        // 获取数据并渲染图表
        function fetchAndRenderSDKChart() {
            $.ajax({
                url: '/api/C2CICDRunningTime/byAll', // 替换为你的后端接口地址
                method: 'GET',
                success: function (response) {
                    if (response.status === 200 && response.data) {
                        renderSdkChart(response.data);
                    } else {
                        console.error('No data available or error response:', response);
                    }
                },
                error: function (err) {
                    console.error('AJAX Error:', err);
                }
            });
        }

        // 渲染图表
        function renderSdkChart(data) {
            var xAxisData = Object.keys(data); // 横坐标（所有的 versionNo）
            var runTimeData = Array(xAxisData.length).fill(0); // 存储 CICD_SOC_SDK 的 runTime 数据

            // 遍历数据结构，只保留 nodeName 为 "CICD_SOC_SDK" 的数据
            xAxisData.forEach((versionNo, index) => {
                data[versionNo].forEach(node => {
                    if (node.nodeName === "CICD_SOC_SDK") {
                        runTimeData[index] = parseFloat(node.runTime); // 只存储 CICD_SOC_SDK 的运行时间
                    }
                });
            });

            // 配置图表
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    data: ["CICD_SOC_SDK"],
                    top: 'top',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    name: 'C2版本号',
                    axisLabel: { interval: 0, rotate: 30 }
                },
                yAxis: {
                    type: 'value',
                    name: '运行时间（分钟）'
                },
                series: [
                    {
                        name: "CICD_SOC_SDK",
                        type: 'bar',
                        data: runTimeData,
                        label: {
                            show: true, // 显示数值
                            position: 'top', // 数值显示在柱子顶部
                            fontSize: 12,
                            color: '#333' // 可调整颜色
                        }
                    }
                ]
            };

            // 使用配置项生成图表
            chart_sdk.setOption(option);
        }

        // 加载图表数据并每隔5秒刷新一次
        setInterval(fetchAndRenderSDKChart, 5000);

        // 初始化页面加载时也渲染一次
        fetchAndRenderSDKChart();




        // 初始化 ECharts
        var chart_mcu = echarts.init(document.getElementById('runningtime_quarter'));

        // 获取数据并渲染图表
        function fetchAndRenderMcuChart() {
            $.ajax({
                url: '/api/C2CICDRunningTime/byAll', // 替换为你的后端接口地址
                method: 'GET',
                success: function (response) {
                    if (response.status === 200 && response.data) {
                        renderMcuChart(response.data);
                    } else {
                        console.error('No data available or error response:', response);
                    }
                },
                error: function (err) {
                    console.error('AJAX Error:', err);
                }
            });
        }

        // 渲染图表
        function renderMcuChart(data) {
            var xAxisData = Object.keys(data); // 横坐标（所有的 versionNo）
            var runTimeData = Array(xAxisData.length).fill(0); // 存储 CICD_C2_MCU 的 runTime 数据

            // 遍历数据结构，只保留 nodeName 为 "CICD_C2_MCU" 的数据
            xAxisData.forEach((versionNo, index) => {
                data[versionNo].forEach(node => {
                    if (node.nodeName === "CICD_C2_MCU") {
                        runTimeData[index] = parseFloat(node.runTime); // 只存储 CICD_C2_MCU 的运行时间
                    }
                });
            });

            // 配置图表
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    data: ["CICD_C2_MCU"],
                    top: 'top',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    name: 'C2版本号',
                    axisLabel: { interval: 0, rotate: 30 }
                },
                yAxis: {
                    type: 'value',
                    name: '运行时间（分钟）'
                },
                series: [
                    {
                        name: "CICD_C2_MCU",
                        type: 'bar',
                        data: runTimeData,
                        label: {
                            show: true, // 显示数值
                            position: 'top', // 数值显示在柱子顶部
                            fontSize: 12,
                            color: '#333' // 可调整颜色
                        }
                    }
                ]
            };

            // 使用配置项生成图表
            chart_mcu.setOption(option);
        }

        // 加载图表数据并每隔5秒刷新一次
        setInterval(fetchAndRenderMcuChart, 5000);

        // 初始化页面加载时也渲染一次
        fetchAndRenderMcuChart();




        // 初始化 ECharts
        var chart_app = echarts.init(document.getElementById('runningtime_year'));

        // 获取数据并渲染图表
        function fetchAndRenderAppChart() {
            $.ajax({
                url: '/api/C2CICDRunningTime/byAll', // 替换为你的后端接口地址
                method: 'GET',
                success: function (response) {
                    if (response.status === 200 && response.data) {
                        renderAppChart(response.data);
                    } else {
                        console.error('No data available or error response:', response);
                    }
                },
                error: function (err) {
                    console.error('AJAX Error:', err);
                }
            });
        }

        // 渲染图表
        function renderAppChart(data) {
            var xAxisData = Object.keys(data); // 横坐标（所有的 versionNo）
            var runTimeData = Array(xAxisData.length).fill(0); // 存储 CICD_SOC_APP 的 runTime 数据

            // 遍历数据结构，只保留 nodeName 为 "CICD_SOC_APP" 的数据
            xAxisData.forEach((versionNo, index) => {
                data[versionNo].forEach(node => {
                    if (node.nodeName === "CICD_SOC_APP") {
                        runTimeData[index] = parseFloat(node.runTime); // 只存储 CICD_SOC_APP 的运行时间
                    }
                });
            });

            // 配置图表
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    data: ["CICD_SOC_APP"],
                    top: 'top',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    name: 'C2版本号',
                    axisLabel: { interval: 0, rotate: 30 }
                },
                yAxis: {
                    type: 'value',
                    name: '运行时间（分钟）'
                },
                series: [
                    {
                        name: "CICD_SOC_APP",
                        type: 'bar',
                        data: runTimeData,
                        label: {
                            show: true, // 显示数值
                            position: 'top', // 数值显示在柱子顶部
                            fontSize: 12,
                            color: '#333' // 可调整颜色
                        }
                    }
                ]
            };

            // 使用配置项生成图表
            chart_app.setOption(option);
        }

        // 加载图表数据并每隔5秒刷新一次
        setInterval(fetchAndRenderAppChart, 5000);

        // 初始化页面加载时也渲染一次
        fetchAndRenderAppChart();





<!-- 同时显示四条流水线版本 CICD_C2_MCU CICD_SOC_SDK CICD_SOC_APP CICD_C2_SOC -->
<!--        // 初始化 ECharts-->
<!--        var chart = echarts.init(document.getElementById('runningtime_week'));-->

<!--        // 获取数据并渲染图表-->
<!--        function fetchAndRenderChart() {-->
<!--            $.ajax({-->
<!--                url: '/api/C2CICDRunningTime/byAll', // 替换为你的后端接口地址-->
<!--                method: 'GET',-->
<!--                success: function (response) {-->
<!--                    if (response.status === 200 && response.data) {-->
<!--                        renderChart(response.data);-->
<!--                    } else {-->
<!--                        console.error('No data available or error response:', response);-->
<!--                    }-->
<!--                },-->
<!--                error: function (err) {-->
<!--                    console.error('AJAX Error:', err);-->
<!--                }-->
<!--            });-->
<!--        }-->

<!--        // 渲染图表-->
<!--        function renderChart(data) {-->
<!--            // 提取横坐标（versionNo）和纵坐标数据-->
<!--            var xAxisData = Object.keys(data); // 横坐标（所有的 versionNo）-->
<!--            var seriesMap = {}; // 存储 nodeName 和对应的 runTime-->

<!--            // 遍历数据结构，整理每个 nodeName 的 runTime 数据-->
<!--            xAxisData.forEach(versionNo => {-->
<!--                data[versionNo].forEach(node => {-->
<!--                    if (!seriesMap[node.nodeName]) {-->
<!--                        seriesMap[node.nodeName] = Array(xAxisData.length).fill(0);-->
<!--                    }-->
<!--                    // 找到对应 versionNo 的索引位置填入 runTime-->
<!--                    var index = xAxisData.indexOf(versionNo);-->
<!--                    seriesMap[node.nodeName][index] = parseFloat(node.runTime);-->
<!--                });-->
<!--            });-->

<!--            // 构造 series 数据-->
<!--            var seriesData = Object.keys(seriesMap).map(nodeName => {-->
<!--                return {-->
<!--                    name: nodeName,-->
<!--                    type: 'bar',-->
<!--                    data: seriesMap[nodeName],-->
<!--&lt;!&ndash;                    label: {&ndash;&gt;-->
<!--&lt;!&ndash;                        show: true, // 显示标签&ndash;&gt;-->
<!--&lt;!&ndash;                        position: 'top', // 标签显示位置在柱子上方&ndash;&gt;-->
<!--&lt;!&ndash;                        formatter: '{c}分钟', // 标签格式，显示运行时间&ndash;&gt;-->
<!--&lt;!&ndash;                        fontSize: 12 // 字体大小&ndash;&gt;-->
<!--&lt;!&ndash;                    }&ndash;&gt;-->
<!--                };-->
<!--            });-->

<!--            // 配置图表-->
<!--            var option = {-->
<!--                tooltip: {-->
<!--                    trigger: 'axis',-->
<!--                    axisPointer: {-->
<!--                        type: 'shadow'-->
<!--                    }-->
<!--                },-->
<!--                legend: {-->
<!--                    data: Object.keys(seriesMap),-->
<!--                    top: 'top', // 设置图例显示在顶部-->
<!--                    left: 'center' // 图例居中-->
<!--                },-->
<!--                xAxis: {-->
<!--                    type: 'category',-->
<!--                    data: xAxisData,-->
<!--                    name: 'C2版本号',-->
<!--                    axisLabel: {-->
<!--                        interval: 0,-->
<!--                        rotate: 30 // 防止横坐标过长显示不下-->
<!--                    }-->
<!--                },-->
<!--                yAxis: {-->
<!--                    type: 'value',-->
<!--                    name: '运行时间（分钟）'-->
<!--                },-->
<!--                series: seriesData-->
<!--            };-->

<!--            // 使用配置项生成图表-->
<!--            chart.setOption(option);-->
<!--        }-->

<!--        // 加载图表数据并每隔5秒刷新一次-->
<!--        setInterval(fetchAndRenderChart, 5000); // 每5秒钟请求一次数据并更新图表-->

<!--        // 初始化页面加载时也渲染一次-->
<!--        fetchAndRenderChart();-->




<!-- 测试用例 -->
<!--         // 初始化 ECharts 实例-->
<!--        const chart_runningtime_week = echarts.init(document.getElementById('runningtime_month'));-->

<!--        // 配置图表的初始选项-->
<!--        const option = {-->
<!--            tooltip: {-->
<!--                trigger: 'axis'-->
<!--            },-->
<!--            legend: {-->
<!--                data: ['运行时间', '运行趋势'],-->
<!--                top: '2%'-->
<!--            },-->
<!--            xAxis: {-->
<!--                type: 'category',-->
<!--                boundaryGap: true,-->
<!--                data: [] // 自然周-->
<!--            },-->
<!--            yAxis: [-->
<!--                {-->
<!--                    type: 'value',-->
<!--                    name: '运行时间(分钟)',-->
<!--                    axisLabel: {-->
<!--                        formatter: '{value}'-->
<!--                    }-->
<!--                }-->
<!--            ],-->
<!--            series: [-->
<!--                {-->
<!--                    name: '运行时间',-->
<!--                    type: 'bar',-->
<!--                    data: [],-->
<!--                    itemStyle: {-->
<!--                        color: '#4CAF50'-->
<!--                    }-->
<!--                },-->
<!--                {-->
<!--                    name: '运行趋势',-->
<!--                    type: 'line',-->
<!--                    data: [],-->
<!--                    itemStyle: {-->
<!--                        color: '#FF5722'-->
<!--                    },-->
<!--                    lineStyle: {-->
<!--                        width: 2-->
<!--                    }-->
<!--                }-->
<!--            ]-->
<!--        };-->

<!--        // 设置图表选项-->
<!--        chart_runningtime_week.setOption(option);-->

<!--        // 定义获取数据的函数-->
<!--        function fetchData() {-->
<!--            $.ajax({-->
<!--                url: '/api/C2CICDRunningTime/byWeek', // 后端 API 地址-->
<!--                method: 'GET',-->
<!--                success: function (response) {-->
<!--                    // 假设 response.data 的格式为：-->
<!--                    // {-->
<!--                    //     "2024第51周": [...],-->
<!--                    //     "2025第1周": [...],-->
<!--                    //     ...-->
<!--                    // }-->

<!--                    // 解析数据-->
<!--                    const naturalWeeks = [];-->
<!--                    const barData = []; // 柱状图数据：每周总运行时间-->
<!--                    const lineData = []; // 折线图数据：每周运行时间趋势-->

<!--                    Object.entries(response.data).forEach(([week, data]) => {-->
<!--                        naturalWeeks.push(week);-->

<!--                        // 计算每周总运行时间-->
<!--                        const totalRunTime = data.reduce((sum, item) => sum + parseInt(item.runTime), 0);-->
<!--                        barData.push(totalRunTime);-->

<!--                        // 获取当前周最大运行时间（用于趋势显示）-->
<!--                        const maxRunTime = Math.max(...data.map(item => parseInt(item.runTime)));-->
<!--                        lineData.push(maxRunTime);-->
<!--                    });-->

<!--                    // 更新图表数据-->
<!--                    chart_runningtime_week.setOption({-->
<!--                        xAxis: {-->
<!--                            data: naturalWeeks,-->
<!--                            axisLabel: {-->
<!--                                    rotate: 20, // 旋转标签防止过长重叠-->
<!--                                    formatter: function(value) {-->
<!--                                        return value; // 可以根据需求格式化季度-->
<!--                                    }-->
<!--                                }-->
<!--                        },-->
<!--                        series: [-->
<!--                            { data: barData }, // 更新柱状图数据-->
<!--                            { data: lineData } // 更新折线图数据-->
<!--                        ]-->
<!--                    });-->
<!--                },-->
<!--                error: function (xhr, status, error) {-->
<!--                    console.error('数据同步失败：', error);-->
<!--                }-->
<!--            });-->
<!--        }-->

<!--        // 定时每隔 5 秒刷新数据-->
<!--        setInterval(fetchData, 5000);-->

<!--        // 初次加载数据-->
<!--        fetchData();-->

    });
</script>
</body>
</html>